import { formatUnit } from "@/utils/format";
import G6 from "@antv/g6";
import { maxBy } from "lodash";

const abnormalColor = "#ff4545";
const normalColor = "#aaa";
const maxErrorRate = 50;
G6.registerEdge(
    "animate-edge",
    {
        draw(cfg, group) {
            const { startPoint, endPoint, errorRate } = cfg;

            const keyShape = group.addShape("path", {
                attrs: {
                    path: [
                        ["M", startPoint.x, startPoint.y],
                        ["L", endPoint.x, endPoint.y],
                    ],
                    stroke:
                        errorRate > maxErrorRate ? abnormalColor : normalColor,
                    lineWidth: errorRate > maxErrorRate ? 2 : 1.5,
                    opacity: 0.8,
                    endArrow: {
                        path: G6.Arrow.triangle(10, 10, 0),
                        fill:
                            errorRate > maxErrorRate
                                ? abnormalColor
                                : normalColor,
                    },
                },
                // must be assigned in G6 3.3 and later versions. it can be any value you want
                name: "edge-shape",
            });
            return keyShape;
        },
        // afterDraw(edge: any, group) {
        //     const shape = group.get('children')[0];
        //     // const startPoint = shape.getPoint(0);
        //     const circleSpace = 9;
        //     const animateSpace = 0.04;
        //     if (parseFloat(edge.requestTotal) > 0 && parseFloat(edge.maxRequestTotal) > 0) {
        //         let count = Math.ceil(edge.requestTotal / (edge.maxRequestTotal / 5));
        //         let color = edge.errorRate > maxErrorRate ? abnormalColor : normalColor;
        //         let allCount = count > 5 ? 5 : count;
        //         for (let i = 0; i < allCount; i++) {
        //             const circle = group.addShape('circle', {
        //                 attrs: {
        //                     x: i * circleSpace,
        //                     y: 0,
        //                     fill: color,
        //                     r: 3,
        //                 },
        //                 id: `animate-circle-${i}`,
        //                 name: 'animate-circle',
        //             });
        //             circle.animate(
        //                 ratio => {
        //                     let position =
        //                         ratio + i * animateSpace > 1 ? 1 : ratio + i * animateSpace;
        //                     const tmPoint = shape.getPoint(position);
        //                     return {
        //                         x: tmPoint.x,
        //                         y: tmPoint.y,
        //                     };
        //                 },
        //                 {
        //                     repeat: true,
        //                     duration: 3000,
        //                 }
        //             );
        //         }
        //     }
        // },
        setState(name, value, item) {
            const keyShape = (item).getKeyShape();
            const stateHandler = {
                hover: function (value, item) {
                    if (value) {
                        keyShape.attr({
                            lineWidth: 8,
                        });
                    } else {
                        keyShape.attr({
                            lineWidth: 2,
                        });
                    }
                },
                active: function (value) {},
            };
            stateHandler[name](value);
        },
    },
    "cubic-vertical"
);

// line cubic-horizontal

G6.registerEdge(
    "custom-message-topo-edge",
    {
        lebelPosition: "center",
        labelAutoRotate: true,
        afterDraw: (cfg, group) => {
            // const theme = getStore("theme") || "light";
            const theme = "light";
            // 获取路径中点坐标
            const edge = group.get("children")[0];
            const midPoint = edge.getPoint(0.4);
            const flowLabel = group.addGroup({ id: "flowLabel" });

            if (midPoint.x) {
                const maxRequestTotalTimeItem = maxBy(
                    cfg?.urlList || [],
                    "requestTotalTime"
                );
                const text = formatUnit(
                    maxRequestTotalTimeItem.requestTotalTime,
                    "ns"
                );
                const [textWidth] = G6.Util.getTextSize(text, 12); // flow.attr('fontSize')
                flowLabel.addShape("text", {
                    attrs: {
                        x: midPoint.x + textWidth / 4,
                        y: midPoint.y + 6,
                        fill: theme === "dark" ? "#0B908A" : "#2338CF",
                        textAlign: "center",
                        text: text,
                        cursor: "pointer",
                    },
                    name: "response-time-text",
                    zIndex: 1000,
                });
                flowLabel.addShape("rect", {
                    attrs: {
                        // label 在线中点
                        x: midPoint.x - textWidth / 4 - 5,
                        y: midPoint.y - 9,
                        width: textWidth + 10,
                        height: 18,
                        fill: theme === "dark" ? "#122734" : "#E7E8FB",
                        cursor: "pointer",
                    },
                    id: "response-time-rect",
                    name: "response-time-rect",
                    draggable: true,
                    zIndex: 10,
                });
                if (cfg.isNowRequest) {
                    flowLabel.addShape("text", {
                        attrs: {
                            x: midPoint.x + 12,
                            y: midPoint.y + 30,
                            fill:
                                theme === "dark"
                                    ? "rgba(255, 255, 255, 0.65)"
                                    : "rgba(0, 0, 0, 0.65)",
                            textAlign: "center",
                            text: "本次请求",
                        },
                        name: "now-request-text",
                        zIndex: 1000,
                    });
                    flowLabel.addShape("rect", {
                        attrs: {
                            // label 在线中点
                            x: midPoint.x - 16,
                            y: midPoint.y + 14,
                            width: 56,
                            height: 20,
                            radius: [2],
                            fill:
                                theme === "dark"
                                    ? "#182D45"
                                    : "rgba(0, 0, 0, 0.06)",
                            stroke:
                                theme === "dark"
                                    ? "rgba(255, 255, 255, 0.2)"
                                    : "rgba(0, 0, 0, 0.2)",
                        },
                        id: "now-request-text-rect",
                        name: "now-request-text-rect",
                        zIndex: 10,
                    });
                }
                // const offsetStyle = G6.Util.getLabelPosition(edge, 0.5, 0, 0, true);
                // labelBg.rotateAtPoint(midPoint.x, midPoint.y, offsetStyle.rotate);
                // flow.rotateAtPoint(midPoint.x, midPoint.y, offsetStyle.rotate);
                flowLabel.sort();
            }
        },
        // * 为了获取到midPoint
        update: undefined,
    },
    "cubic"
);
